<!DOCTYPE html>
<html lang="zh-cn" >
<head>
    <meta charset="UTF-8">
    <title>口是心非</title>
</head>
<style>
    /*@property --my-color {*/
    /*    syntax: '<color>',*/
    /*    inherits: false,*/
    /*    initialValue: '#c0ffee',*/
    /*}*/
    #md {
        width: 400px;
        height: 400px;
        --x:50%;
        --y:50%;
        --s:10%;
        background: conic-gradient(
                at var(--x) var(--y),
                #500 0, #500 45deg,
                #f00 45deg, #f00 90deg,
                #f50 90deg, #f50 135deg,
                #ff0 135deg, #ff0 180deg,
                #0c0 180deg, #0c0 225deg,
                #09d 225deg, #09d 270deg,
                #00b 270deg, #00b 315deg,
                #909 315deg, #909 360deg
        ) top left / var(--s) var(--s) repeat;
        transition: all 2s;
    }

    #md:hover {
        /*background:conic-gradient(#500, #f00, #f50, #ff0, #0c0, #09d, #03a, #909);*/
        /*background: repeating-linear-gradient(to right bottom,blue, red, green,blue 100px);*/
        --s:20%
    }

</style>

<body>
<div>
    <div id="md" >

    </div>
</div>
<script>
    // CSS.registerProperty({
    //     name: '--x',
    //     syntax: '<length>',
    //     inherits: false,
    //     initialValue: "50%"
    // });
    // CSS.registerProperty({
    //     name: '--y',
    //     syntax: '<length>',
    //     inherits: false,
    //     initialValue: "50%"
    // });
    document.getElementById("md").addEventListener("click", function (e) {

         this.style.setProperty("--x", (e.x/this.offsetWidth)*100 + "%");
         this.style.setProperty("--y", (e.y/this.offsetHeight)*100 + "%");
    })

</script>
</body>
</html>